import React from 'react'
import { Breadcrumb } from 'antd';
import { Link, useLocation } from 'react-router-dom';
// 导入封装好的方法
import { getBreadcrumbNameMap } from '@/utils/common'
// 导入routes 这个路由映射表
import { routes } from '@/router/Index'
type Props = {}

export default function Appbreadcrumb({ }: Props) {

    // 就是页面的路径path 和 对应菜单选项的映射对象
    // const breadcrumbNameMap: Record<string, string> = {
    //     '/home': '首页',
    //     '/apps/1': 'Application1',
    //     '/apps/2': 'Application2',
    //     '/apps/1/detail': 'Detail',
    //     '/apps/2/detail': 'Detail',
    // };   

    const breadcrumbNameMap = getBreadcrumbNameMap(routes)
    //console.log(getBreadcrumbNameMap(routes));
    // 获取当前路由的信息对象, 相当于 vue 中的 useRoute()
    const location = useLocation();
    //console.log(location.pathname);
    const pathSnippets = location.pathname.split('/').filter((i) => i);
    //console.log('pathSnippets', pathSnippets);  // [home] 或 ['account','adminlist']

    // 列出哪些路由不能跳, 组成一个数组
    const disabledlinkArr = routes.map(item => item.key && item.children ? item.path : null)
    // console.log('disabledlinkArr', disabledlinkArr);

    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;  // /home 或 /account和 /account/adminlist
        return {
            key: url,
            title: disabledlinkArr.includes(url) ? <>{breadcrumbNameMap[url]}</> : < Link to={url} > {breadcrumbNameMap[url]}</Link>,
        };
    });

    // console.log('extraBreadcrumbItems', extraBreadcrumbItems);

    const breadcrumbItems = [
        {
            title: <Link to="/">仪表盘</Link>,
            key: '/',
        },
    ].concat(extraBreadcrumbItems);

    return (
        <Breadcrumb items={breadcrumbItems} />
    )
}